<template>
  <div class="app-container">
    <!--搜索拦-->
    <el-row :gutter="15" class="mb8">
      <el-col :span="1.5">
        <el-button
          icon="el-icon-plus"
          plain
          size="mini"
          @click="handelAddQueryFields"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
        >导入
        </el-button>
      </el-col>

      <el-form
        :inline="true"
        :model="formData"
        class="el-form-search"
        @submit.prevent
      >
        <!--字段名称-->
        <el-form-item
          class="el-form-search-item"
          label="字段名称"
          porp="fieldName"
        >
          <el-input v-model="formData.fieldName" clearable></el-input>
        </el-form-item>
        <!--中文名称-->
        <el-form-item
          class="el-form-search-item"
          label="中文名称"
          porp="fieldCnName"
        >
          <el-input v-model="formData.fieldCnName" clearable></el-input>
        </el-form-item>

        <el-form-item
          class="el-form-search-item"
          label="表前缀"
          prop="tablePrefix"
        >
          <el-select
            v-model="formData.tablePrefix"
            clearable
            filterable
            placeholder="请选择表标识"
          >
            <el-option
              v-for="tableDefinition in tableDefinitionList"
              :key="tableDefinition.tablePrefix"
              :label="tableDefinition.tableCnName"
              :value="tableDefinition.tablePrefix"
            />
          </el-select>
        </el-form-item>

        <!-- 查询按钮 -->
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="loadData"
        >搜索
        </el-button>
      </el-form>
    </el-row>

    <!--表格-->
    <el-table border :data="tableData" :height="tableHeight" stripe>
      <el-table-column align="center" label="#" type="index" width="50">
        <template slot-scope="scope">
          <span>{{
              (formData.pageNum - 1) * formData.pageSize + scope.$index + 1
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="字段名称" prop="fieldName" align="center"/>
      <el-table-column label="中文名称" prop="fieldCnName" align="center"/>
      <el-table-column label="排序" prop = "sort" align="center"/>
      <el-table-column
        label="表前缀"
        prop="tableDefinition.tablePrefix"
        align="center"
      />
      <el-table-column label="是否展示" prop="isShow" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.isShow == 1">是</el-tag>
          <el-tag type="danger" v-if="scope.row.isShow == 0">否</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" prop="createTime" align="center"/>
      <el-table-column label="修改时间" prop="updateTime" align="center"/>
      <el-table-column label="创建者" prop="creator" align="center"/>
      <el-table-column label="修改人" prop="modifier" align="center"/>

      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="text"
            @click="handleEditAddQueryFields(scope.row)"
          >
            修改
          </el-button>
          <el-button
            size="small"
            type="text"
            @click="handelDelAddQueryFields(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页控件 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="formData.pageNum"
      :limit.sync="formData.pageSize"
      @pagination="loadData"
    />
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="open"
      width="800px"
    >
      <el-form
        ref="formDataRef"
        :model="submitData"
        :rules="rule"
        label-width="100px"
      >
        <!--第一行-->
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="字段名称" prop="fieldName">
              <el-input v-model="submitData.fieldName" placeholder="字段名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中文名称" prop="fieldCnName">
              <el-input
                v-model="submitData.fieldCnName"
                placeholder="中文名称"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="表前缀" prop="tablePrefix">
              <el-select
                v-model="submitData.tablePrefix"
                placeholder="请选择表标识"
              >
                <el-option
                  v-for="tableDefinition in tableDefinitionList"
                  :key="tableDefinition.tablePrefix"
                  :label="tableDefinition.tableCnName"
                  :value="tableDefinition.tablePrefix"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否展示" prop="isShow">
              <el-radio v-model="submitData.isShow" :label="1">是</el-radio>
              <el-radio v-model="submitData.isShow" :label="0">否</el-radio>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="15">
          <el-col :span="12">
              <el-form-item label="排序" prop="sort">
                <el-input
                  v-model="submitData.sort"
                  placeholder="排序"
                />
              </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormData">提交</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px">
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport"/>
          是否更新已经存在的表格数据
          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getSettingQueryFields,
  addSettingQueryFields,
  editSettingQueryFields,
  deleteSettingQueryFields,
  getTableDefinition,
  getSettingQueryFieldsById
} from '@/api/system/settingQUeryFields'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      total:0,
      formData: {
        pageNum: 1,
        pageSize: 30,
        fieldCnName: ''
      },
      tableData: [],
      tableHeight: "calc(100vh - 200px)",

      submitData: {},
      title: '',
      open: false,
      tableDefinitionList: [],

      rule: {
        fieldName: [
          {
            required: true,
            message: '字段名称不能为空',
            trigger: 'blur'
          }
        ],
        fieldCnName: [
          {
            required: true,
            message: '中文名称不能为空',
            trigger: 'blur'
          }
        ],
        tablePrefix: [
          {
            required: true,
            message: '表前缀不能为空',
            trigger: 'blur'
          }
        ]
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/zk/setting/query/fields/importData'
      }

    }
  },
  methods: {
    loadData() {
      //获取数据
      getSettingQueryFields(this.formData).then((response) => {
        console.log(response)
        this.total = response.total
        this.tableData = response.rows
      })
      //获取表标识数据
      getTableDefinition().then((response) => {
        this.tableDefinitionList = response.rows
      })
    },
    handelAddQueryFields() {
      //修改字段方法
      this.title = '新增查询字段'
      this.open = true
    },
    handleEditAddQueryFields(row) {
      //修改字段方法
      // TODO 根据id查询字段查询
      getSettingQueryFieldsById(row.id).then((response) => {
        console.log(response)
        this.submitData = response.data
      })
      console.log(row)
      this.title = '编辑查询字段'
      this.open = true
    },
    handelDelAddQueryFields(row) {
      this.$modal
        .confirm('确认删除吗？')
        .then(function() {
          return deleteSettingQueryFields(row.id)
        })
        .then(() => {
          this.loadData()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
        })
    },
    submitFormData() {
      console.log(this.submitData)
      this.$refs['formDataRef'].validate((valid) => {
        if (valid) {
          if (this.submitData.id !== undefined) {
            //修改
            editSettingQueryFields(this.submitData).then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.resetForm('formDataRef')
              this.loadData()
            })
          } else {
            //新增
            addSettingQueryFields(this.submitData).then((response) => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.resetForm('formDataRef')
              this.loadData()
            })
          }
        }
      })
    },
    close() {
      this.resetForm('formDataRef')
      this.open = false
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '表格数据导入'
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('/zk/setting/query/fields/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
      this.getList()
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    }

  },
  mounted() {
    this.loadData()
  },
  created() {
  }
}
</script>

<style lang="scss" scoped></style>
